1 html, body {
2 height: 100%;
3 }
4
5 html {
6 display: table;
7 margin: auto;
8 }
9
10 body {
11 display: table-cell;
12 vertical-align: middle;
13 background-color: #8e0000;
14 font-family: Arial, sans-serif;
15 }
16
17 .left{
18 float: left !important;
19 }
20
21 .right{
22 float: right !important;
23 }
24
25 .left-align{
26 text-align: left !important;
27 }
28
29 .center-align{
30 text-align: center !important;
31 }
32
33 h1{
34 font-size: 38px;
35 font-family: 'Open Sans', arial;
36 font-weight: 300;
37 color: #ffffff;
38 }
39
40 ol, ul{
41 margin-top: 8px;
42 }
43
44 li{
45 line-height: 22px;
46 }
47
48 .bg-green{
49 background-color: #4CAF50 !important;
50 }
51
52 .transparent{
53 background-color: rgba(0,0,0,0.7) !important;
54 }
55
56 .black-text{
57 color: #000000 !important;
58 }
59
60 .white-text{
61 color: #FFFFFF !important;
62 }
63
64 .blue-text{
65 color: #0072ff !important;
66 }
67
68 .green-text{
69 color: #4CAF50 !important;
70 }
71
72 .red-text{
73 color: #b31217 !important;
74 }
75
76 .white-border{
77 border: 2px solid #FFFFFF !important;
78 }
79
80 .info{
81 color: #FFFFFF;
82 font-size: 0.8rem;
83 }
84
85 .num{
86 font-size: 18px;
87 font-family: 'Open Sans', arial;
88 font-weight: bold;
89 color: #000000;
90 display: block;
91 text-transform: uppercase;
92 }
93
94 #per:after{
95 content: '%';
96 }
97
98 .material-icons{
99 font-size: 24px;
100 line-height: 1;
101 display: inline-block;
102 }
103
104 span.material-icons{
105 font-size: 4rem;
106 }
107
108 #start-screen, #end-screen{
109 width: 500px;
110 text-align: center;
111 }
112
113 .row{
114 margin: 0 auto;
115 }
116
117 .row:after{
118 content: '';
119 display: table;
120 clear: both;
121 }
122
123 .row .col{
124 left: auto;
125 right: auto;
126 margin-left: auto;
127 float: left;
128 }
129
130 .row .col.half{
131 width: 50%;
132 left: auto;
133 right: auto;
134 }
135
136 .row .col.half-narrow{
137 width: 25%;
138 left: auto;
139 right: auto;
140 }
141
142 .row .col.half-wider{
143 width: 75%;
144 left: auto;
145 right: auto;
146 }
147
148 .card{
149 position: relative;
150 width: 80%;
151 text-decoration: none;
152 color: #427fed;
153 text-align: center;
154 margin: auto;
155 padding: 20px 40px 10px 40px;
156 border-radius: 4px ;
157 -webkit-border-radius: 4px;
158 -moz-border-radius: 4px;
159 background-color: #fff;
160 }
161
162 .waiting{
163 position: absolute;
164 width: 476px;
165 height: 480px;
166 margin-top: 10px;
167 display: none;
168 }
169
170 .card-option{
171 max-width: 550px;
172 width: auto;
173 height: 220px;
174 }
175
176 video{
177 border: 1px solid #FFFFFF;
178 display:none;
179 margin-bottom: 5px;
180 }
181
182 img{
183 height: 450px;
184 width: 550px;
185 }
186
187 .sc-img{
188 height: 95px;
189 width: 450px;
190 display: block;
191 margin: 40px 52px 40px 53px;
192 cursor: pointer;
193 }
194
195 .sc-equal{
196 height: 65px;
197 }
198
199 .rtw-info-img{
200 width: 450px;
201 height: 70px;
202 display: block;
203 margin: 30px auto 20px auto;
204 }
205
206 .rtw-img{
207 width: 200px;
208 height: 50px;
209 cursor: pointer;
210 display: inline-block;
211 margin: 8px;
212 border: 4px solid transparent;
213 }
214
215 .rtw-img:hover{
216 border: 4px solid #FFFFFF;
217 }
218
219 .btn{
220 color: #ffffff;
221 background-color: #0072ff;
222 text-align: center;
223 text-decoration: none;
224 letter-spacing: 1px;
225 cursor: pointer;
226 height: 54px;
227 line-height: 54px;
228 display: inline-block;
229 font-size: 2rem;
230 width: 48.5%;
231 border: 1px solid transparent;
232 }
233
234 .timer{
235 color: #ffffff;
236 background-color: #4CAF50;
237 text-align: center;
238 letter-spacing: 0.5px;
239 height: 40px;
240 line-height: 40px;
241 display: inline-block;
242 font-size: 1.3rem;
243 width: 100%;
244 }
245
246 .start{
247 width: 80%;
248 padding: 0 2rem;
249 height: 40px;
250 line-height: 38px;
251 font-size: 1.5rem;
252 background-color: #0072ff;
253 border: none;
254 border-radius: 34px;
255 margin-top: 10px;
256 }
257
258 .continue{
259 width: 65%;
260 padding: 0 2rem;
261 height: 40px;
262 line-height: 40px;
263 font-size: 1.5rem;
264 text-transform: uppercase;
265 background-color: #0072ff;
266 border-radius: 34px;
267 margin: 5px auto 20px -5px;
268 box-sizing: inherit;
269 }
270
271 .replay i{
272 margin-left: 15px;
273 font-size: 1.6rem;
274 line-height: inherit;
275 }
276
277 .btn-info{
278 width: 90%;
279 color: #FFFFFF;
280 font-size: 1.5rem;
281 background-color: #292929;
282 margin-bottom: 20px;
283 }
284
285 .ready{
286 width: 99%;
287 font-size: 1.5rem;
288 }
289
290 .pause{
291 height: 38px;
292 line-height: 38px;
293 font-size: 2rem !important;
294 width: 15%;
295 }
296
297 .score{
298 height: 38px;
299 line-height: 38px;
300 font-size: 1.5rem !important;
301 width: 30%;
302 }
303
304 .score:before{
305 content: 'Score ';
306 }
307
308 .btn-circle{
309 display: inline-block;
310 background-color: #0072ff;
311 overflow: hidden;
312 position: relative;
313 z-index: 1;
314 width: 50px;
315 height: 50px;
316 border-radius: 50%;
317 cursor: pointer;
318 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
319 margin-top: 25px;
320 }
321
322 .btn-circle i{
323 line-height: 50px;
324 display: inline-block;
325 text-align: center;
326 color: #FFFFFF;
327 font-size: 1.8rem;
328 }
329
330 .check{
331 position: absolute;
332 width: 80px;
333 height: 80px;
334 top: 32%;
335 left: 42%;
336 margin: 0;
337 border: 6px solid #FFFFFF;
338 display: none;
339 }
340
341 .check i{
342 line-height: 80px;
343 font-size: 4rem;
344 }
345
346 .check.green{
347 background-color: #4CAF50 !important;
348 }
349
350 .check.red{
351 background-color: #b31217 !important;
352 }
353
354 .green:hover{
355 background-color: #4CAF50;
356 border: 1px solid #FFFFFF;
357 }
358
359 .red:hover{
360 background-color: #b31217;
361 border: 1px solid #FFFFFF;
362 }
363
364 .hoverable:hover{
365 transition: box-shadow .25s;
366 -webkit-transition: box-shadow .25s;
367 -moz-transition: box-shadow .25s;
368 box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
369 -webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
370 -moz-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
371 }
372
373 .divider{
374 margin-top: 15px;
375 margin-bottom: 15px;
376 background-color: #e0e0e0;
377 height: 1px;
378 overflow: hidden;
379 box-sizing: inherit;
380 }
381
382 .off{
383 display: none;
384 }
385
386 .on{
387 display: block;
388 }
